<template>
  <el-dialog
    v-model="visible"
    width="800px"
    :close-on-click-modal="false"
    @close="onClose"
    class="unified-dialog alert-detail-dialog"
  >
    <template #header>
      <div class="dialog-header">
        <div class="header-icon header-icon-danger">
          <el-icon><Bell /></el-icon>
        </div>
        <div class="header-content">
          <h3>告警详情</h3>
          <p>查看告警的完整信息和处理状态</p>
        </div>
      </div>
    </template>
    <div class="dialog-content">
      <el-tabs type="border-card">
        <!-- 基本信息 -->
        <el-tab-pane label="基本信息">
          <el-form label-width="120px" :model="alert" disabled>
            <el-form-item label="作业名称">
              <el-text>{{ alert.job_name || '-' }}</el-text>
            </el-form-item>
            
            <el-form-item label="作业ID">
              <el-text type="info" size="small">{{ alert.job_id || '-' }}</el-text>
            </el-form-item>

            <el-form-item label="告警类型">
              <el-tag :type="getAlertTypeTag(alert.alert_type)" size="small">
                {{ getAlertTypeLabel(alert.alert_type) }}
              </el-tag>
            </el-form-item>
            
            <el-form-item label="告警标题">
              <el-text>{{ alert.alert_title || '-' }}</el-text>
            </el-form-item>
            
            <el-form-item label="告警信息">
              <el-text style="white-space: pre-wrap;">{{ alert.message || '-' }}</el-text>
            </el-form-item>
            
            <el-form-item label="状态">
              <el-tag :type="getStatusType(alert.status)" size="small">
                {{ alert.status }}
              </el-tag>
            </el-form-item>

            <el-form-item label="严重程度" v-if="alert.severity">
              <el-tag :type="getSeverityType(alert.severity)" size="small">
                {{ getSeverityLabel(alert.severity) }}
              </el-tag>
            </el-form-item>

            <el-form-item label="发送次数">
              <el-text>{{ alert.send_count || 0 }}</el-text>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- Alertmanager信息 -->
        <el-tab-pane label="Alertmanager信息" v-if="isAlertmanagerAlert">
          <el-form label-width="120px" :model="alert" disabled>
            <el-form-item label="告警ID">
              <el-text size="small">{{ alert.alert_id || '-' }}</el-text>
            </el-form-item>

            <el-form-item label="告警名称">
              <el-text>{{ alert.alertname || '-' }}</el-text>
            </el-form-item>

            <el-form-item label="实例地址">
              <el-text>{{ alert.instance || '-' }}</el-text>
            </el-form-item>

            <el-form-item label="主机名">
              <el-text>{{ alert.hostname || '-' }}</el-text>
            </el-form-item>

            <el-form-item label="服务名称">
              <el-text>{{ alert.service || '-' }}</el-text>
            </el-form-item>

            <el-form-item label="设备名称" v-if="alert.device">
              <el-text>{{ alert.device }}</el-text>
            </el-form-item>

            <el-form-item label="集群ID" v-if="alert.cluster_id">
              <el-text>{{ alert.cluster_id }}</el-text>
            </el-form-item>

            <el-form-item label="分组键" v-if="alert.group_key">
              <el-text size="small">{{ alert.group_key }}</el-text>
            </el-form-item>

            <el-form-item label="标签信息" v-if="alert.labels">
              <vue-json-viewer :value="alert.labels" :expand-depth="2" copyable boxed />
            </el-form-item>

            <el-form-item label="注解信息" v-if="alert.annotations">
              <vue-json-viewer :value="alert.annotations" :expand-depth="2" copyable boxed />
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 时间信息 -->
        <el-tab-pane label="时间信息">
          <el-form label-width="120px" :model="alert" disabled>
            <el-form-item label="创建时间">
              <el-text>{{ formatTime(alert.creation_time) }}</el-text>
            </el-form-item>

            <el-form-item label="告警开始时间" v-if="alert.starts_at">
              <el-text>{{ formatTime(alert.starts_at) }}</el-text>
            </el-form-item>

            <el-form-item label="告警结束时间" v-if="alert.ends_at">
              <el-text>{{ formatTime(alert.ends_at) }}</el-text>
            </el-form-item>
            
            <el-form-item label="解决时间" v-if="alert.resolved_time">
              <el-text>{{ formatTime(alert.resolved_time) }}</el-text>
            </el-form-item>

            <el-form-item label="最后发送时间" v-if="alert.last_send_time">
              <el-text>{{ formatTime(alert.last_send_time) }}</el-text>
            </el-form-item>

            <el-form-item label="静默截止时间" v-if="alert.silence_until">
              <el-text>{{ formatTime(alert.silence_until) }}</el-text>
            </el-form-item>

            <el-form-item label="处理时间" v-if="alert.processed_at">
              <el-text>{{ formatTime(alert.processed_at) }}</el-text>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 处理信息 -->
        <el-tab-pane label="处理信息">
          <el-form label-width="120px" :model="alert" disabled>
            <el-form-item label="是否已处理">
              <el-tag :type="alert.is_processed ? 'success' : 'info'" size="small">
                {{ alert.is_processed ? '已处理' : '未处理' }}
              </el-tag>
            </el-form-item>

            <el-form-item label="处理人" v-if="alert.processed_by">
              <el-text>{{ alert.processed_by }}</el-text>
            </el-form-item>
            
            <el-form-item label="升级原因" v-if="alert.escalation_reason">
              <el-text>{{ alert.escalation_reason }}</el-text>
            </el-form-item>

            <el-form-item label="恢复尝试次数">
              <el-text>{{ alert.recovery_attempts || 0 }} / {{ alert.max_recovery_attempts || 3 }}</el-text>
            </el-form-item>

            <el-form-item label="是否允许升级">
              <el-tag :type="alert.can_escalate ? 'success' : 'danger'" size="small">
                {{ alert.can_escalate ? '允许' : '禁止' }}
              </el-tag>
            </el-form-item>

            <el-form-item label="通知渠道" v-if="alert.notification_channels">
              <el-text>{{ alert.notification_channels }}</el-text>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    
    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Bell } from '@element-plus/icons-vue'
import dayjs from 'dayjs'

// 接收外部传入的告警数据
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  alert: {
    type: Object,
    required: true
  }
})

// 控制对话框显示状态
const visible = computed({
  get: () => props.modelValue,
  set: (value) => {
    emit('update:modelValue', value)
  }
})

// 判断是否为Alertmanager告警
// 默认全部都不显示Alertmanager信息标签页
const isAlertmanagerAlert = computed(() => {
  return false
})

// 发射事件
const emit = defineEmits(['update:modelValue'])

// 格式化时间
const formatTime = (time) => {
  if (!time) return '-'
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}

// 告警类型标签
const getAlertTypeTag = (type) => {
  const typeMap = {
    'FIRST_FAILURE': 'warning',
    'RETRY_FAILURE': 'warning',
    'FINAL_FAILURE': 'danger',
    'RECOVERED': 'success',
    'FIRING': 'danger',
    'RESOLVED': 'success',
    'ALERTMANAGER': 'info',
    'OTHER': 'info'
  }
  return typeMap[type] || 'info'
}

// 告警类型标签文字
const getAlertTypeLabel = (type) => {
  const labelMap = {
    'FIRST_FAILURE': '首次失败',
    'RETRY_FAILURE': '重试失败',
    'FINAL_FAILURE': '最终失败',
    'RECOVERED': '已恢复',
    'FIRING': '触发中',
    'RESOLVED': '已解决',
    'ALERTMANAGER': 'Alertmanager',
    'OTHER': '其他'
  }
  return labelMap[type] || type
}

// 严重程度类型映射
const getSeverityType = (severity) => {
  const severityMap = {
    'emergency': 'danger',
    'critical': 'danger',
    'exception': 'warning',
    'warning': 'warning',
    'info': 'info'
  }
  return severityMap[severity] || 'info'
}

// 严重程度标签
const getSeverityLabel = (severity) => {
  const labelMap = {
    'emergency': '紧急',
    'critical': '严重',
    'exception': '异常',
    'warning': '警告',
    'info': '信息'
  }
  return labelMap[severity] || severity
}

// 状态类型映射
const statusTypeCache = new Map()
const getStatusType = (status) => {
  if (statusTypeCache.has(status)) {
    return statusTypeCache.get(status)
  }
  const statusMap = {
    'ACTIVE': 'warning',
    'RESOLVED': 'success',
    'SILENCED': 'info',
    'ESCALATED': 'danger',
    'FIRING': 'danger'
  }
  const result = statusMap[status] || 'info'
  statusTypeCache.set(status, result)
  return result
}

// 关闭对话框时清空数据
const onClose = () => {
  // 可以在此添加清理逻辑
}
</script>

<style scoped>
/* 对话框已使用统一样式系统 (dialog-system.css) */

/* 内容样式 */
.dialog-content {
  max-height: 600px;
  overflow-y: auto;
}

/* Tabs 样式优化 */
.dialog-content :deep(.el-tabs--border-card) {
  border-radius: 12px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.dialog-content :deep(.el-tabs__header) {
  background: #f8f9fa;
  border-radius: 12px 12px 0 0;
  border-bottom: 2px solid #409eff;
}

.dialog-content :deep(.el-tabs__item) {
  font-weight: 500;
  transition: all 0.3s ease;
}

.dialog-content :deep(.el-tabs__item.is-active) {
  color: #409eff;
  font-weight: 600;
}

.dialog-content :deep(.el-tabs__content) {
  padding: 20px;
}

/* 表单项样式优化 */
.dialog-content :deep(.el-form-item__label) {
  color: #606266;
  font-weight: 500;
  font-size: 14px;
}

.dialog-content :deep(.el-form-item__content) {
  font-size: 14px;
}

/* 按钮样式 */
.dialog-content :deep(.el-button) {
  border-radius: 8px;
  font-weight: 500;
}

/* 滚动条样式 */
.dialog-content::-webkit-scrollbar {
  width: 6px;
}

.dialog-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.dialog-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.dialog-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .alert-detail-dialog {
    width: 95% !important;
    margin: 0 auto;
  }
}
</style>